<template>
  <div class="container">
    <h1>分类</h1>
    <p class="item" v-for="(item, index) in data" :key="index" @click="toIncludeType(item)">
      <img src="@/assets/icon/wenjian.png" alt="" />
      <span>{{item.name}}</span>
    </p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      data: "",
    };
  },
  methods: {
    getData() {
      this.$axios.post("/api/category/list").then((res) => {
        // console.log(res)
        this.data = res.data;
      });
    },
    toIncludeType(item){
      this.$router.push({
        path:"/home/includetype",
        query:item
      })
    }
  },
  created() {
    this.getData();
  },
};
</script>

<style lang="scss" scoped>
.container {
  display: flex;
  flex-direction: column;
 
  h1{
    padding-left: 10px;
    text-align: left;
  }
  .item {
    padding: 5px 0px 5px 0px;
    border-radius: 5px;
    text-align: left;

    img {
      width: 20px;
      height: 20px;
      padding-left: 10px;
      vertical-align: middle;
    }
  }
  .item:hover{
    color: rgb(53, 152, 250);
    background-color: #eee;
    cursor: pointer;
  }
}
</style>